import React, { useRef } from 'react';

import { PlusOutlined, EditOutlined } from '@ant-design/icons';
import {
  ModalForm,
  ProFormText,
  ProFormRadio,
  ActionType,
  ProFormTreeSelect,
  ProFormGroup,
  ProFormDigit,
  ProFormDependency,
  ProFormSelect,
} from '@ant-design/pro-components';
import { Button, Form, message } from 'antd';
import { useAppSelector, useAppDispatch } from '@/app/common/hooks';
import { translationIcon } from '@utils';
import { getRouters } from '@/app/stores/features/userStore';

import { DataSourceType } from '.';

type MenuFormProps = {
  actionRef: ActionType;
  title?: string;
  isEdit?: boolean;
  menuId?: number;
};

function CreateMenuForm(props: MenuFormProps) {
  const actionRef = useRef<ActionType>(props.actionRef);
  const [form] = Form.useForm<DataSourceType>();
  const dispatch = useAppDispatch();

  const menuData = useAppSelector(s => [
    {
      label: '主类目',
      value: 0,
      children: s.user.menuTree,
    },
  ]);

  return (
    <ModalForm<DataSourceType>
      title={props.title}
      trigger={
        <Button type={props.isEdit ? 'link' : 'primary'}>
          {props.isEdit ? <EditOutlined /> : <PlusOutlined />}
          {props.title}
        </Button>
      }
      request={async () => {
        if (props.isEdit) {
          const res = await $get(`/system/menu/${props.menuId}`);
          if (res.code === 200 && form) {
            form.setFieldsValue(res.data);
          }
          return res.status === 200 ? res.data.data : {};
        } else {
          return {
            menuType: 'C',
            isFrame: '1',
            status: '0',
            visible: '0',
            isCache: '1',
          };
        }
      }}
      form={form}
      modalProps={{
        maskClosable: false,
        destroyOnClose: true,
      }}
      submitTimeout={2000}
      onFinish={async (values: any) => {
        const method = props.isEdit ? $put : $post;
        const body = props.isEdit ? { ...values, menuId: props.menuId } : values;
        const res = await method('/system/menu', { data: body });
        const isSuccess = res.code === 200;
        if (isSuccess) {
          message.success(props.isEdit ? '修改菜单成功' : '添加菜单成功');
        }
        actionRef.current?.reload();
        dispatch(getRouters());
        return isSuccess;
      }}
    >
      <ProFormTreeSelect
        width="xl"
        fieldProps={{
          treeData: menuData,
        }}
        required
        name="parentId"
        label="上级菜单"
      />
      <ProFormGroup>
        <ProFormRadio.Group
          name="menuType"
          label="菜单类型"
          radioType="button"
          options={[
            {
              label: '目录',
              value: 'M',
            },
            {
              label: '菜单',
              value: 'C',
            },
            {
              label: '按钮',
              value: 'F',
            },
          ]}
        />
      </ProFormGroup>
      <ProFormDependency name={['menuType']}>
        {({ menuType }) => {
          if (!menuType) {
            return '';
          }
          if (menuType === 'F') {
            return (
              <>
                <ProFormGroup>
                  <ProFormText width="md" required name="menuName" label="菜单名称" />
                  <ProFormDigit width="md" required name="orderNum" label="显示排序" />
                  <ProFormText width="md" required name="perms" label="权限字符" />
                </ProFormGroup>
              </>
            );
          } else {
            return (
              <>
                <ProFormSelect
                  options={translationIcon()}
                  width="xl"
                  required
                  name="icon"
                  label="菜单图标"
                />
                <ProFormGroup>
                  <ProFormDigit width="md" required name="orderNum" label="显示排序" />
                  <ProFormText width="md" required name="menuName" label="菜单名称" />
                </ProFormGroup>
                <ProFormGroup>
                  <ProFormText width="md" required name="path" label="路由地址" />
                  <ProFormRadio.Group
                    name="isFrame"
                    label="是否外链"
                    options={[
                      {
                        label: '是',
                        value: '0',
                      },
                      {
                        label: '否',
                        value: '1',
                      },
                    ]}
                  />
                </ProFormGroup>
                {menuType === 'C' ? (
                  <ProFormGroup>
                    <ProFormText width="md" name="component" label="组件路径" />
                    <ProFormText width="md" name="perms" label="权限字符" />
                    <ProFormText width="md" name="query" label="路由参数" />
                    <ProFormRadio.Group
                      name="isCache"
                      label="是否缓存"
                      options={[
                        {
                          label: '缓存',
                          value: '0',
                        },
                        {
                          label: '不缓存',
                          value: '1',
                        },
                      ]}
                    />
                  </ProFormGroup>
                ) : (
                  ''
                )}
                <ProFormGroup>
                  <ProFormRadio.Group
                    name="status"
                    label="菜单状态"
                    options={[
                      {
                        label: '正常',
                        value: '0',
                      },
                      {
                        label: '停用',
                        value: '1',
                      },
                    ]}
                  />
                  <ProFormRadio.Group
                    name="visible"
                    label="显示状态"
                    options={[
                      {
                        label: '是',
                        value: '0',
                      },
                      {
                        label: '否',
                        value: '1',
                      },
                    ]}
                  />
                </ProFormGroup>
              </>
            );
          }
        }}
      </ProFormDependency>
    </ModalForm>
  );
}

export default CreateMenuForm;
